<!--
 * @Author: Charsen
 * @Date: 2025-07-25 10:12
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 11:28:06
 * @Description: 
-->
<template>
  <Content>
    <div class="flex-y-center justify-between">
      <SearchFormer
        :data="searchFormer.data"
        :fields="searchFormer.fields"
        @on-confirm="handleSearchChange"
      />
      <div class="flex-y-center">
        <OptionAdd v-action="actions.add" @on-add="showCreator" />
        <OptionTrashed
          v-action="actions.trashed"
          :entity="entity"
          :trashed-route="getTrashedRoute()"
          class="mx-20px"
          :show-text="true"
        />
        <el-button type="primary" size="small" plain round @click="manageGroup">分组管理</el-button>
      </div>
    </div>

    <el-row
      v-for="(tags, index) in list"
      :key="`group-${index}`"
      v-loading="listLoading"
      :gutter="20"
      class="tag-list"
    >
      <el-col class="mt-20px mb-10px font-s-16px fw-bold">
        <span class="color-primary">#</span>
        {{ tags[0].group.tag_group_name }}
      </el-col>
      <el-col v-for="(item, ii) in tags" :key="`tag-${ii}`" :span="8">
        <el-card class="mb-20px" shadow="hover">
          <div class="card-info">
            <div class="m-fixed pr-20px pb-20px">
              <el-badge :value="item.taggable_count" type="primary" class="mt-10px mr-10px">
                <MAvatar
                  :size="48"
                  :name="item.tag_name"
                  :url="item.tag_icon_url"
                  class="mt--10px"
                />
              </el-badge>
            </div>
            <div class="widen">
              <span
                v-if="item.tag_recommend"
                class="i-custom-recommend mr-7px color-primary"
              ></span>
              <strong>{{ item.tag_name }}</strong>
              <br />
              <el-tag type="warning">{{ item.tag_slug }}</el-tag>
            </div>
          </div>
          <div class="card-count">
            <ul>
              <li>
                <span>0</span>
                <br />
                文章
              </li>
              <li>
                <span>0</span>
                <br />
                课程
              </li>
            </ul>
          </div>
          <div class="card-bottom">
            <ListTimer :created="item.created_at" :updated="item.updated_at" />
            <Options
              :id="item.id"
              :actions="actions"
              :index="index"
              :options="item.options"
              class="mt-5px mr--8px float-right"
              @on-edit="showEditor"
              @on-del="handleDestroy"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <Creator
      v-model:visible="createDialog.visible"
      :entity="createDialog.entity"
      :form-size="createDialog.size"
      @on-stored="fetchData"
    />

    <Editor
      v-model:visible="editDialog.visible"
      :entity-id="editDialog.id"
      :entity="editDialog.entity"
      :form-size="editDialog.size"
      @on-updated="fetchData"
    />
  </Content>
</template>

<script setup lang="ts">
  import { useCreator } from '#/hooks/useCreator'
  import { useDestroy } from '#/hooks/useDestroy'
  import { useEditor } from '#/hooks/useEditor'
  import { useLister } from '#/hooks/useLister'
  import { getActions } from '#/utils/auth'

  defineOptions({
    name: `${entity}Index`,
  })
  const entity = 'Tag'
  const actions = getActions('tagging-tag')

  const { list, listLoading, searchFormer, handleSearchChange, fetchData, getTrashedRoute } =
    useLister({ entity })

  const { handleDestroy } = useDestroy({ entity, list })
  const { createDialog, showCreator } = useCreator({ entity })
  const { editDialog, showEditor } = useEditor({ entity })

  const router = useRouter()
  const manageGroup = () => {
    const routeData = router.resolve({ name: 'TagGroupIndex' })
    window.open(routeData.href, '_blank')
  }

  onMounted(() => {
    fetchData()
  })
</script>
